<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/root.css">
    <link rel="stylesheet" href="css/login.css">
    <script src="js/jquery-2.1.0.min.js"></script>
</head>

<body>
<div id="app">
    <div id="header">
        <div class="width">
            <div id="logo">
                <p>欢迎登陆</p>
            </div>
        </div>
    </div>
    <div id="warning">
    </div>
    <div id="login">
        <div>
            <div id="login_module">
                <div id="login_module_warning">
                    <i class="iconfont">&#xe62b;</i>
                </div>
                <div id="login_module_remind">
                    <a href="" @click.prevent="comName='login',aFig=true" :class="aFig?'myActive':''">账户登录</a>|
                    <a href="" @click.prevent="comName='registered',aFig=false" :class="aFig?'':'myActive'">立即注册</a>
                </div>
                <login v-if="aFig" :userarr="objArr"></login>
                <registered v-else @userfunc="show"></registered>
            </div>
        </div>
    </div>
    <div id="below">
        <div id="copyright">
        </div>
    </div>
</div>


<template id="temp1">
    <div class="login_module_input">
        <div class="login_module_input_div">
            <img src="icon/user1.png" alt="">
            <input type="text" v-model="user" placeholder="账号">
        </div>
        <div class="login_module_input_div">
            <img src="icon/pwd1.png" alt="">
            <input type="password" v-model="pwd" placeholder="密码">
        </div>
        <div id="submit" @click="login">登&nbsp;&nbsp;&nbsp;&nbsp;录</div>
    </div>
</template>

<template id="temp2">
    <div class="login_module_input">
        <div class="login_module_input_div">
            <img src="icon/user1.png" alt="">
            <input type="text" v-model="user" placeholder="账号">
        </div>
        <div class="login_module_input_div">
            <img src="icon/pwd1.png" alt="">
            <input type="password" v-model="pwd" placeholder="密码">
        </div>
        <div class="login_module_input_div">
            <img src="icon/pwd2.png" alt="">
            <input type="password" v-model="confirmPwd" placeholder="确认密码">
        </div>
        <div id="submit" @click=registered()>注&nbsp;&nbsp;&nbsp;&nbsp;册</div>
    </div>
</template>

<script src="js/vue.js"></script>
<script>
    const login = {
        data() {
            return {
                user: '',
                pwd: '',
                objArr: this.userarr
            }
        },
        template: '#temp1',
        methods: {
            login() {
                var contextPath= [[@{/}]];
                    $.post(contextPath+"user/login",
                        {
                    	username: this.user,
                    	password: this.pwd,
                        },
                        function (data, status) {
                            console.log(data);
                            if (data.code==0){
                            	window.location.href="index";
                            }else{
                                alert("用户名或密码错误");
                            }
                        });
            }
        },
        props: ['userarr'],
    }
    const registered = {
        data() {
            return {
                user: '',
                pwd: '',
                confirmPwd: ''
            }
        },
        template: '#temp2',
        methods: {
            registered() {
            	if(this.pwd !=this.confirmPwd){
            		return;
            	}
            	 var contextPath= [[@{/}]];      
                $.post(contextPath+"user/addUser",
                    {
                        user: this.user,
                        pwd: this.pwd,
                    },
                    function (data, status) {
                        console.log(data);
                        if (data.code==0){
                            alert("注册成功");
                            location.reload();
                        }else{
                            alert("操作失败!"+data.msg);
                        }
                    });

            }
        },
    }

    var vm = new Vue({
        el: '#app',
        data() {
            return {
                comName: 'login',
                aFig: true,
                objArr: [
                    {user: '111', pwd: '222'}
                ]
            }
        },
        methods: {
            show(obj) {
                this.objArr.push(obj)
                this.aFig = true
            }
        },
        components: {
            login,
            registered
        }
    })
    
    
    
</script>

<script th:inline="javascript">     
        var contextPath= [[@{/}]];      
        console.log(contextPath);
</script>

</body>

</html>